<template>
    <div class="top-movers">
        <div class="title">Top Movers</div>
        <div class="stocks-box">
            <StockCard v-for="item in stock_list" :key="item.id" :symbol="item.symbol" :stock_code="item.shortName" :company="item.name" :value="item.change" :price="item.price" :more="item.more" :trade="() => selectStockTrade(item)"></StockCard>
        </div>
    </div>
</template>

<script setup>
// import { computed } from 'vue';
import StockCard from '@/components/pageunit/index/StockCard.vue';
import { stock_list } from '@/service/market.js';
import { active_stock } from '@/service/trade';
import { routerTo } from '@/utils/jump';

function selectStockTrade(item) {
    active_stock.value = item;
    routerTo('/trade');
}

// 获取跌涨幅最高的前5只股票
// const top_movers = computed(() => {
//     return stock_list.value;
//     // return stock_list.value.slice(0, 5);
// });
// const top_movers = stock_list;
</script>

<style scoped lang="less">
.top-movers {
    width: 100%;

    .title {
        font-size: 1.2vw;
        font-weight: 700;
        margin-bottom: 1vw;
    }

    .stocks-box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1vw;
    }
}
</style>